{% extends "base.html" %}
{% block title %}导航网站 - 首页{% endblock %}

{% block content %}
<!-- 搜索引擎选择和搜索框 -->
<div class="search-section text-white p-5">
    <div class="container">
        <h1 class="text-center mb-4">林默导航</h1>
        <p class="text-center mb-5">Alt + Tab 在打开的项目之间切换。</p>

        <div class="d-flex flex-wrap justify-content-center gap-2 mb-4">
            <a href="#" class="btn btn-light search-engine-btn" data-engine="bing" data-placeholder="微软必应搜索">
                <img src="https://cn.bing.com/favicon.ico" class="me-1 icon" alt="">Bing必应
            </a>
            <a href="#" class="btn btn-light search-engine-btn" data-engine="baidu" data-placeholder="百度一下">
                <img src="https://www.baidu.com/favicon.ico" class="me-1 icon" alt="">百度一下
            </a>
            <a href="#" class="btn btn-light search-engine-btn" data-engine="google" data-placeholder="谷歌搜索">
                <img src="https://www.google.com/favicon.ico" class="me-1 icon" alt="google-icon">谷歌搜索
            </a>
            <a href="#" class="btn btn-light search-engine-btn" data-engine="translate" data-placeholder="翻译内容">
                <img src="https://fanyi.baidu.com/favicon.ico" class="me-1 icon" alt="baidu-fanyi-icon">在线翻译
            </a>
        </div>

        <form id="search-form" class="d-flex justify-content-center">
            <input type="text" id="search-input" class="form-control flex-grow-1 me-2 max-w-600"
                   placeholder="微软必应搜索">
            <button type="submit" class="btn btn-primary d-flex align-items-center" id="search-btn">
                <i class="bi bi-search fs-5 search-icon"></i>
            </button>
        </form>
    </div>
</div>

<!-- 原有内容 -->
<div class="container mt-4">
    {% for category in categories %}
        <div class="mb-4">
            <h4 class="mb-3 border-start border-4 ps-3 border-primary fw-bold category-label">{{ category.name }}</h4>
            <div class="row g-3">
                {% for website in category.websites %}
                    <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                        <a href="{{ website.url }}" target="_blank"
                           class="card h-100 shadow-sm text-decoration-none hover-scale site-card border-0">
                            <div class="card-body d-flex flex-column">
                                <div class="d-flex align-items-center mb-2">
                                    {% if website.local_logo %}
                                        <img src="{{ website.local_logo }}" alt="{{ website.name }}"
                                             class="me-2 rounded" style="height: 40px; object-fit: cover;">
                                    {% elif website.logo %}
                                        <img src="{{ website.logo }}" alt="{{ website.name }}"
                                             class="me-2 rounded" style="height: 40px; object-fit: cover;">
                                    {% else %}
                                        <img src="{{ url_for('static', filename='img/default.png') }}"
                                             alt="默认图片" class="me-2 rounded"
                                             style="height: 40px; object-fit: cover;">
                                    {% endif %}
                                    <h6 class="mb-0 site-name flex-grow-1">{{ website.name }}</h6>
                                </div>
                                <p class="description mt-auto">
                                    {{ website.description }}
                                </p>
                            </div>
                        </a>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endfor %}
</div>

<!-- 样式 -->
<style>
    .category-label {
        font-weight: bold;
        font-size: 1.1rem;
        color: #041b4f;
    }
    body.night .category-label {
        color: #ffffff;
    }

    .hover-scale {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .hover-scale:hover {
        transform: translateY(-2px);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.1);
    }

    .site-card {
        min-height: 150px;
        background-color: #ffffff;
        color: #212529;
    }
    .site-name {
        color: #212529;
        font-weight: 600;
    }
    .description {
        color: #6c757d;
        font-size: 0.875rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 2.8em;
    }

    body.night .site-card {
        background-color: #1e1e1e;
        color: #e0e0e0;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    body.night .site-name {
        color: #ffffff;
    }
    body.night .description {
        color: #cccccc;
    }

    .text-center {
        text-align: center;
        color: #1a1e21;
    }
    body.night .text-center {
        color: #ffffff;
    }



    body.night .search-section h1,
    body.night .search-section p {
        color: #ffffff;
    }

    .search-engine-btn {
        padding: 0.5rem 1rem;
        font-size: 1rem;
        border-radius: 0.25rem;
    }
    .search-engine-btn.active {
        border: 2px solid #0d6efd;
        background-color: #eaf3ff;
    }
    body.night .search-engine-btn.active {
        background-color: #2d2d2d;
        border-color: #0d6efd;
        color: #ffffff;
    }

    .icon {
        width: 16px;
        height: 16px;
        object-fit: contain;
        border-radius: 3px;
        vertical-align: middle;
    }

    .search-icon.animate {
        animation: spin 0.6s ease-in-out;
    }

    @keyframes spin {
        0% { transform: rotate(0); }
        100% { transform: rotate(360deg); }
    }

    .max-w-600 {
        max-width: 600px;
    }

    @media (max-width: 576px) {
        #search-form {
            flex-direction: column;
            gap: 0.5rem;
        }
        #search-input {
            width: 100%;
        }
        #search-btn {
            width: 100%;
            justify-content: center;
        }
    }
</style>


<!-- 脚本 -->
<script>
    const engineMap = {
        bing: {
            url: 'https://www.bing.com/search',
            queryParam: 'q'
        },
        baidu: {
            url: 'https://www.baidu.com/s',
            queryParam: 'wd'
        },
        google: {
            url: 'https://www.google.com/search',
            queryParam: 'q'
        },
        translate: {
            url: 'https://fanyi.baidu.com/',
            queryParam: 'query'
        }
    };

    let selectedEngine = 'bing';

    document.querySelectorAll('.search-engine-btn').forEach(button => {
        button.addEventListener('click', (e) => {
            e.preventDefault();
            selectedEngine = button.dataset.engine;
            const placeholder = button.dataset.placeholder || '搜索内容';
            document.getElementById('search-input').placeholder = placeholder;
            document.querySelectorAll('.search-engine-btn').forEach(btn => btn.classList.remove('active'));
            button.classList.add('active');
        });
    });

    window.addEventListener('DOMContentLoaded', () => {
        const defaultBtn = document.querySelector('.search-engine-btn[data-engine="bing"]');
        if (defaultBtn) defaultBtn.click();
    });

    document.getElementById('search-form').addEventListener('submit', function (e) {
        e.preventDefault();
        const input = document.getElementById('search-input');
        const keyword = input.value.trim();
        const engine = engineMap[selectedEngine];
        if (!engine) return;
        const url = keyword
            ? `${engine.url}?${engine.queryParam}=${encodeURIComponent(keyword)}`
            : engine.url;
        const icon = document.querySelector('.search-icon');
        icon.classList.add('animate');
        setTimeout(() => icon.classList.remove('animate'), 600);
        window.open(url, '_blank');
    });
</script>
{% endblock %}
